<template>
    <view>
		<view class="list-cell" v-for="(cell, index) in list" :key="index"  @click="selectHandle(cell)">
		    <view class="avatar"><u-avatar :src="cell.avatar"></u-avatar></view>
		    <view class="name">
		        <view class="role">{{ cell.userName }}</view>
		        <view class="dept">销售部/销售经理</view>
		    </view>
		    <view class="radio-box">
		        <label class="radio">
		            <radio :value="cell.userId" :checked="isInSelectList(cell.userId)" />
		        </label>
		    </view>
		</view>
        <!-- 底部 -->
        <view class="bottom">
            <view class="left">
                <u-avatar v-for="item in selectList"  :src="item.avatar" :key="item.userId" class="avatar" :size="30"></u-avatar>
            </view>
            <view class="right" @click="confirm">确定<text v-if="selectList.length">({{ selectList.length }})</text></view>
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            selectList: [],
			list: [],
            tempObj: {
                id: null,
                name: null
            },
            multiple: false // true 多选   false 单选
        }
    },
    onLoad: function(option) {

        this.getData()
		
        const eventChannel = this.getOpenerEventChannel();
		let that = this
         // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('emitDataHandle', function(data) {
            console.log(data)
            that.multiple = data.type || false
            let list = JSON.parse(JSON.stringify(data.data))
            that.selectList = list || []
        })
    },
    methods: {
        getData() {
            this.$http.get('/app/user/listData', {}).then(res => {
				if (res.code == 200) {
					this.list = res.data
				} 
			})
        },
        selectHandle(e) {
            if(this.multiple) {
                const index = this.selectList.findIndex(item => item.userId === e.userId);
                if (index > -1) {
                    // 如果存在，从 selectList 中删除
                    this.selectList.splice(index, 1);
                } else {
                    // 如果不存在，添加到 selectList 中
                    this.selectList.push(e);
                }
            } else {
                this.selectList = [e];
            }

        },
        isInSelectList(userId) {
            return this.selectList.some(item => item.userId === userId);
        },
        confirm() {
            if(!this.selectList.length) {
                this.$toast('请选择人员');
            }
            let list = JSON.parse(JSON.stringify(this.selectList))
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('someEvent', {data: list});
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
        align-items: center;
        .avatar {
            margin-right: 20rpx;
        }
        .name {
            flex: 1;
            .role {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }
            .dept {
                font-size: 28rpx;
                color: rgba(103, 117, 133, 1);
            }
        }

	}
    /deep/.u-border-bottom {
        border: none;
    }
    .bottom {
        padding: 30rpx 32rpx;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        box-shadow: 0px 0px 12rpx  rgba(0, 0, 0, 0.1);
        .left {
            display: flex;
            flex: 1;
            margin-right: 32rpx;
            overflow: hidden;
            .avatar {
                margin-right: 32rpx;
            }
        }
        .right {
            width: 160rpx;
            height: 36px;
            line-height: 36px;
            text-align: center;
            opacity: 1;
            border-radius: 30px;
            background: rgba(77, 172, 177, 1);
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }
    }
</style>